<template>
	<view class="self-left" v-if="hasLogin">
		<view class="user-data" @click.stop="toUserInfo">
			<uni-id-pages-avatar width="36px" height="36px"></uni-id-pages-avatar>
			<view class="nickname">{{userInfo.nickname}}</view>
		</view>
		
		<view class="menu">
			<view class="item" v-for="(item,index) in menu.list" :key="index" :class="{'active':index===menu.active}"
				@click="menu.menuChange(index)">
				{{item.label}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, reactive, toRefs } from 'vue';
	import { store } from '@/uni_modules/uni-id-pages/common/store.js'
	import { menuStore } from '@/store/menu.js';
	const { hasLogin, userInfo } = toRefs(store)
	const menu = menuStore()

	function toUserInfo() {
		uni.navigateTo({
			url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
		})
	}
</script>

<style lang="scss">
	.self-left {
		width: 160px;
		height: 100vh;
		border-right: 1px solid #eee;
		background: #2e2e2e;
		overflow-x: auto;
		flex-shrink: 0;

		.user-data {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 12px;
			border-bottom: 1px solid #333;

			.nickname {
				flex: 1;
				padding-left: 10px;
				color: #bbb;
				font-weight: 600;
			}
		}

		.menu {
			.item {
				margin: 12px;
				padding: 6px 12px;
				color: #777;
				font-size: 14px;
				border-radius: 6px;
				cursor: pointer;

				&.active {
					background: #333;
					color: #bbb;
				}
			}
		}
	}
</style>